<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>编辑异常事项</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:30px 30px;">
        <el-form label-width="120px" ref="editForm" v-if="editForm">
          <el-form-item label="异常名称:" prop="name" v-if="attrType=='title'">
            <el-input v-model="name" auto-complete="off" placeholder="异常名称（如：XX过敏）"></el-input>
          </el-form-item>
          <div v-if="attrType=='attr'">
            <el-form-item label="注意事项:">
              <div class="tag-line">
                  <span class="tag-line-list activeTag">
                    {{ cateName }}</span>
              </div>
            </el-form-item>
            <el-form-item :label="cateName+'事项:'" prop="height">
              <div v-if="editForm.cate.id==1" class="diseaseList">
                避免食用
                <el-tag
                    :key="tag"
                    v-for="tag in editForm.list"
                    closable
                    :disable-transitions="false"
                    class="mr-5"
                    size="medium"
                    @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    placeholder="填写食物名称"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput()">+ 添加避免食用的食物</el-button>
              </div>
              <el-input v-model="description" auto-complete="off" placeholder="异常说明"
                        type="textarea" :rows="3"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <el-button type="primary" size="small" @click="submitFormAdd()">确认并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['visible', 'deviceId', 'attrType'],
  components: {},
  data() {
    return {
      studentTitle: '',
      dialogVisible: this.visible,
      editForm: null, // 编辑界面数据
      description: '',
      name: '',
      cateName: '',
      inputVisible: false,
      inputValue: '',
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('详情页展示了', this.deviceId,this.attrType)
        if (this.deviceId) {
          this.getDetail()
        } else {
          this.editForm = null
        }
      }else{
        this.name = ''
      }
    }
  },
  created() {
  },
  methods: {
    async getDetail() {
      let url = this.api.Developmental.carefull.list.edit;
      if (this.attrType === 'title') {
        url = this.api.Developmental.carefull.disease.edit;
      }
      let data = await this.$fetch(url, {id: this.deviceId})
      if (!data.code) {
        data.vo.list = data.vo.list?JSON.parse(data.vo.list):[]
        this.editForm = data.vo
        if (this.attrType === 'title') {
          this.name = data.vo.name
        } else {
          this.cateName = data.vo.cate.name
          this.description = data.vo.description
        }
      }
    },
    async submitFormAdd() {
      if (!this.description && this.attrType === 'attr') {
        this.$message.error('填写注意事项说明')
        return
      }

      if (!this.name && this.attrType === 'title') {
        this.$message.error('填写异常名称')
        return
      }
      let dataOption = {
        id: this.deviceId
      }
      if(this.attrType === 'attr'){
        dataOption.description = this.description
        dataOption.list = JSON.stringify(this.editForm.list)
      }else{
        dataOption.name = this.name
      }
      let url = this.api.Developmental.carefull.list.edit;
      if (this.attrType === 'title') {
        url = this.api.Developmental.carefull.disease.edit;
      }
      let data = await this.$post(url, dataOption)
      if (!data.code) {
        this.$message.success(data.msg)
        this.$emit('beforePageFn')
        this.closePOpup()
      }
    },
    closePOpup() {
      this.$emit('update:visible', false)
      for (let i in this.editForm) {
        this.editForm[i] = ''
      }
    },
    handleClose(tag) {
      this.editForm.list.splice(this.editForm.list.indexOf(tag), 1);
    },

    showInput(index) {
      this.foodIndex = index
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput[index].$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.editForm.list.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.popupbody-boxin {
  min-height: 400px;
}

.tag-line-list {
  margin-right: 10px;
  border: 1px solid #eee;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.tag-line-list i {
  margin-right: 5px;
}

.activeTag {
  border: 1px solid #3e89ff;
  background: #e7f0ff;
}

.activeTag i, .activeTag {
  color: #3e89ff;

}
.diseaseList{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
  align-items: center;
}
.diseaseList .input-new-tag{
  max-width: 120px;
}
</style>


